<template>
  <div :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
import * as echarts from 'echarts'
// require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    ydata: {
      type: Array,
      default: () => []
    },
    legend: {
      type: Array,
      default: () => ['入库数量', '出库数量', '在库数量']
    },
    dataGroup: {
      type: Array,
      default: () => [
        [],
        [],
        []
      ]
    },
  },
  data() {
    return {
      chart: null,
      interval: null,
      barData: [
        { name: '入库数量', startColor: 'rgba(250, 206, 125, 0.5)', endColor: 'rgba(250, 206, 125, 1)' },
        { name: '出库数量', startColor: 'rgba(156, 192, 233, 0.5)', endColor: 'rgba(156, 192, 233, 1)' },
        { name: '在库数量', startColor: 'rgba(106, 188, 195, 0.5)', endColor: 'rgba(106, 187, 195, 1)' },
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null

    if (this.interval) {
      clearInterval(this.interval);
      this.interval = null;
    }
  },
  methods: {
    initChart() {
      let serData = [];
      this.barData.forEach((item, index) => {
        serData.push({
          name: item.name,
          type: 'bar',
          stack: 'all',
          barWidth: 20,
          data: this.dataGroup[index],
          label: {
            show: true,
            position: 'inside',
            color: '#fff',
            fontSize: 16,
            formatter: '{c}',
            offset: [0, 2],
          },
          showBackground: false,
          backgroundStyle: {
            color: 'rgba(0,0,0,0)'
          },
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                { offset: 0, color: item.startColor }, // 起始色
                { offset: 1, color: item.endColor } // 结束色
              ]
            }
          }
        })
      })

      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        backgroundColor: "transparent",
        tooltip: {
          show: true,
          trigger: 'axis', // item
          // axisPointer: {
          //   type: 'shadow',
          // },
        },
        legend: {
          icon: 'rect',
          bottom: '0%',
          left: '10%',
          orient: 'horizontal', // 图例方向【horizontal/vertical】
          itemHeight: 15, //修改icon图形大小
          itemWidth: 52, // 修改icon图形大小
          selectedMode: true,
          itemGap: 50,
          textStyle: {
            fontSize: 16,
            color: '#fff',
          },
          data: this.barData.map(item => ({
            name: item.name,
            icon: 'rect',
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  { offset: 0, color: item.startColor },
                  { offset: 1, color: item.endColor }
                ]
              }
            }
          })),
        },
        grid: {
          show: false,
          left: '0%',
          right: '0%',
          bottom: '10%',
          top: '0',
          //是否包含坐标轴
          containLabel: true,
        },
        xAxis: [
          {
            type: 'value',
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            boundaryGap: true,
            axisLine: {
              show: false,
              lineStyle: {
                color: '#5d85a0',
                width: 1,
                type: 'solid',
              },
            },
            axisLabel: {
              show: false,
              color: '#fff',
              fontSize: 16,
            },
          },
        ],
        yAxis: [
          {
            type: 'category',
            name: '',
            data: this.ydata,
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#5d85a0',
                width: 1,
                type: 'solid',
              },
            },
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: 16,
              },
            },
          },
        ],
        series: serData,
      })
    },
  }
}
</script>
